<template>
	<div class="dynamic-table">
		<table>
			<!-- 表头 -->
			<thead>
				<tr>
					<th class="corner-cell">{{ title }}</th>
					<th v-for="col in yLegend" :key="col">{{ col }}</th>
				</tr>
			</thead>
			<!-- 表格内容 -->
			<tbody>
				<tr v-for="(row, rowIndex) in values" :key="`row-${rowIndex}`">
					<th>{{ xLegend[rowIndex] }}</th>
					<td v-for="(cell, cellIndex) in row" :key="`cell-${cellIndex}`">
						{{ cell }}
					</td>
				</tr>
				<!-- 合计行 -->
				<!-- <tr class="total-row">
					<th>合计</th>
					<td v-for="(col, colIndex) in yLegend" :key="`total-${colIndex}`">
						{{ calculateColumnTotal(colIndex) }}
					</td>
				</tr> -->
			</tbody>
		</table>
	</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
	name: 'DynamicTable',
	props: {
		xLegend: {
			type: Array as PropType<string[]>,
			required: true
		},
		yLegend: {
			type: Array as PropType<string[]>,
			required: true
		},
		values: {
			type: Array as PropType<number[][]>,
			required: true
		},
		title: {
			type: String,
			required: true
		}
	},
	methods: {
		// 计算每列的总和
		calculateColumnTotal(colIndex: number): number {
			return this.values.reduce((sum, row) => sum + (row[colIndex] || 0), 0)
		}
	}
})
</script>

<style scoped>
.dynamic-table {
	margin: 5px;
	width: 100%;
	overflow-x: auto;

	/* IE/Edge */

	/* font-family: Arial, sans-serif; */
}

::-webkit-scrollbar {
	height: 6px;
	/* 横向滚动条高度 */
	background: transparent;
	/* 背景透明 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
	background: #f1f1f1;
	/* 轨道颜色 */
	border-radius: 3px;
	/* 圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	background: #c0c0c0;
	/* 滑块颜色 */
	border-radius: 3px;
	/* 圆角 */
}

/* 滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
	/* 悬停颜色 */
}

table {
	border-collapse: collapse;
	width: auto;
}

th,
td {
	border: 1px solid #fff;
	padding: 6px;
	text-align: center;
	color: #333;
}

th {
	background-color: rgba(20, 145, 255, 0.1);
	color: #1491ff;
}

.corner-cell {
	background-color: rgba(20, 145, 255, 0.1);
	color: #1491ff;
}

tr:nth-child(even) {
	/* background-color: #f9f9f9; */
}
</style>
